import React from 'react'
import { PieChart, Pie, Cell } from 'recharts'

const DataDashboard = ({ slots, guides }) => {
  const data = [
    { name: '可用', value: slots.filter((s) => !s.occupied).length },
    { name: '占用', value: slots.filter((s) => s.occupied).length },
  ]

  return (
    <div style={{ marginTop: 20, border: '1px solid #ddd', padding: 20 }}>
      <h3>数据看板</h3>
      <PieChart width={300} height={200}>
        <Pie data={data} cx="50%" cy="50%" outerRadius={60}>
          <Cell fill="#4CAF50" />
          <Cell fill="#FF5252" />
        </Pie>
      </PieChart>
      <p>引导线总数: {guides.length}</p>
    </div>
  )
}
export default DataDashboard
